<template>
  <div class="about">
    <bcd-top title="关于" englishtitle="About Us" />
    <div style="padding:20px 30px;box-sizing: border-box;padding-bottom:0;
" :style="$store.getters.screenWidth ? 'padding:10px 3px' : ''">    
  
   
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="关于我们" style="font-weight:500;font-size:16px" name="first"></el-tab-pane>
        <el-tab-pane label="联系我们" style="font-weight:500;font-size:16px" name="second"></el-tab-pane>
        <el-tab-pane label="加入我们" style="font-weight:500;font-size:16px" name="third"></el-tab-pane>
        <el-tab-pane label="意见反馈" style="font-weight:500;font-size:16px" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>
    <router-view></router-view>
    <footer-part></footer-part>
  </div>
</template>
<script>
import imageText from "../components/imageText";
import footerPart from "../views/footer";
import { mapGetters } from "vuex";
import bcdTop from "../components/bcdTop";
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  mounted() {},
  created() {
  
    if ( this.aboutpath == "/aboutIndex") {
      this.activeName = "first";
    } else if ( this.aboutpath == "/contant") {
      this.activeName = "second";
    } else if ( this.aboutpath == "/Join") {
      this.activeName = "third";
    } else {
      this.activeName = "fourth";
    }
  },
  computed: {
    ...mapGetters({
      aboutpath: "aboutPath"
    })
  },
  watch: {
    aboutpath(val) {
      if (val == "/aboutIndex") {
        this.activeName = "first";
      } else if (val == "/contant") {
        this.activeName = "second";
      } else if (val == "/Join") {
        this.activeName = "third";
      } else {
        this.activeName = "fourth";
      }
    }
  },
  components: {
    imageText,
    footerPart,
    bcdTop
  },
  methods: {
    handleClick(tab) {
      switch (tab.index) {
        case "0":
          this.$router.push("/aboutIndex");
          break;
        case "1":
          this.$router.push("/contant");
          break;
        case "2":
          this.$router.push("/Join");
          break;
        case "3":
          this.$router.push("/feedback");
          break;
      }
    }
  }
};
</script>
<style>
.el-tabs__active-bar{
  background-color: transparent;
}
.el-tabs__nav{
  width:100%;
}
.el-tabs__nav-wrap.is-scrollable{
  padding: none;
}
.el-tabs__nav-next{
  display: none;
}
.el-tabs__nav-prev{
  display: none;
}
.el-tabs__nav-scroll{
  overflow: auto;
}
.el-tabs__nav-wrap::after {
  width: 0;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

</style>